<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 模态框（Modal）插件</title>
   <!-- <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>-->

    <link rel="stylesheet" href="./css/bootstrap.css">
    <script src="./js/jquery2.1.1.min.js"></script>
    <script src="./js/bootstrap.js"></script>

    <!--sweetalert2-->
    <link href="./dist/sweetalert2.min.css" rel="stylesheet">
    <script src="./dist/sweetalert2.min.js" type="text/javascript"></script>


    <style>
        .swal2-popup {
            width: 1000px;
           height: 500px;

        }
    </style>

</head>
<body>


<!-- 按钮触发模态框 -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#tuPianYuLan">
    开始演示模态框
</button>



<!-- 图片预览模态框（Modal） -->
<div class="modal fade" id="tuPianYuLan"  role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog"  style="width: 1500px;" >
        <div class="modal-content" >
            <div class="modal-header">

                <button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="fun()">
                    &times;
                </button>

                <h4 class="modal-title" id="myModalLabel">
                    模态框（Modal）标题
                </h4>

            </div>
            <div class="modal-body">
                在这里添加一些文本




                <!-- 按钮触发模态框 -->
                <button  onclick="fn()">
                    模态框中框
                </button>

                <div style="height: 2000px;background-color:red;">

                </div>

             <!--   &lt;!&ndash; 图片预览模态框（Modal） &ndash;&gt;
                <div class="modal fade" id="tuPianYuLan2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                    <div class="modal-dialog"  style="width: 800px;margin-top: 400px" >
                        <div class="modal-content" >
                            <div class="modal-header">

                                <button type="button" class="close" data-dismiss="modal2" aria-hidden="true" onclick="fun2()">
                                    &times;
                                </button>

                                <h4 class="modal-title" id="myModalLabel2">
                                    模态框（Modal）标题
                                </h4>

                            </div>
                            <div class="modal-body">
                                在这里添加一些文本

                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-default" data-dismiss="" onclick="fun2()">关闭
                                </button>
                                <button type="button" class="btn btn-primary">
                                    提交更改
                                </button>
                            </div>
                        </div>&lt;!&ndash; /.modal-content &ndash;&gt;
                    </div>&lt;!&ndash; /.modal &ndash;&gt;
                </div>-->



            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                </button>
                <button type="button" class="btn btn-primary">
                    提交更改
                </button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal -->
</div>


<script>

    /*通过 data-dismiss="modal"  属性可以关闭 modal弹窗  但是如果同事有两个 modal 弹窗 会都关闭  所以可以用下面的方法进行关闭*/

  /*  function fun(){
      $('#tuPianYuLan').modal('hide')
    }*/


    function fun2(){
        $('#tuPianYuLan2').modal('hide')

        /*关闭最上面的弹窗  可能会影响下面弹窗的滚动条效果  添加下面的代码 恢复 */
        setTimeout(function (){
            $('body').addClass('modal-open')
        },700)
    }


    async function fn(){

        $('#tuPianYuLan').hide()


        const p = await Swal.fire({         //await 拿到异步函数执行的结果  才执行下面的逻辑       await必须使用在 async 修饰的函数中
            title: '请输入',
            html:
                '姓名<input id="swal-input1" class="swal2-input" maxlength="10">姓名<input id="swal-input1" class="swal2-input" maxlength="10"><br>' +         //maxlength  最多输入10个字符
                '年龄<input id="swal-input2" class="swal2-input"><br>'+
                '爱好<input id="swal-input3" class="swal2-input"><br>'+
                '地址<input id="swal-input4" class="swal2-input">',
            focusConfirm: true,
            preConfirm: () => {
                return [
                    document.getElementById('swal-input1').value,
                    document.getElementById('swal-input2').value,
                    document.getElementById('swal-input3').value,
                    document.getElementById('swal-input4').value
                ]
            },
            allowOutsideClick: false, //弹框外是否可点
            confirmButtonText:'提交',
            showCancelButton: true,
            cancelButtonText: '取消',
        })




        if (p) {

            console.log(p)              // formValues 数组对象

            Swal.fire(JSON.stringify(p.value))                          //打印出填的值

            $('#tuPianYuLan').show()
        }
    }


</script>

</body>
</html>